<script setup>
//定义变量控制弹窗是否出现
import {onMounted, ref} from "vue";
import axios, {post} from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";
import router from "@/router";

const dialogVisible = ref(false);
//定义变量用来保存弹窗的标题
const dialogTitle = ref();
//定义处理弹窗关闭的方法
const handleClose = ()=>{
  if(confirm('您确认要关闭本弹窗吗?')){
    dialogVisible.value = false;
  }
}
//定义对象用来保存搜索卡片的车位卡详情搜索条件
const searchParkCardForm = ref({
  parkingId:'',
  type:'',
  status:''
});
// 定义对象保存车位卡信息
const currentRow = ref({
  parkingId:'',
  parkingName:'',
  parkCardId:'',
  name:'',
  type:'',
  content:'',
  holderCount:'',
  comment:'',
  price:'',
  status:'',
  validDate:'',
  sales:'',
});
//定义数组用来保存车位卡详情表格数据
const parkCardArr = ref([]);
//定义加载车位卡数据的方法
const loadUserParkCard = ()=>{

  let data = qs.stringify(searchParkCardForm.value)
  console.log(data)
  axios.get(BASE_URL+"/v1/parkCard/select?"+data).then(response=>{
    if (response.data.code==2000){
      parkCardArr.value = response.data.data;
    }else {
      ElMessage.error(response.data.msg)
    }
  })
}
//定义新建车位卡保存内容
const newParkCardForm = ref({
  parkCardId:'',
  name:'',
  type:'',
  parkingId:'',
  price:'',
  status:'',
});
//定义新建车位卡弹窗的显示方法
const newParkCard = ()=>{
  dialogTitle.value = "新建车位卡";
  dialogVisible.value = true;
  currentRow.value = {};
  }
//页面一加载完毕,立即调用加载方法
onMounted(()=>{
  loadUserParkCard();
  getParkinglots();
})
const resetSearchForm = ()=>{
  searchParkCardForm.value={}
  loadUserParkCard();
}

// 定义查看车位卡信息的方法
const checkParkCard = (row)=>{
  dialogTitle.value="编辑车位卡";
  currentRow.value = row;
  dialogVisible.value = true;
  value.value=row.parkingId;
}
//保存车位卡
const handleSave = ()=>{
  currentRow.value.parkingId = value.value;
  //console.log(currentRow.value.parkingId);
  // console.log(value);
  let data = qs.stringify(currentRow.value);
  axios.post(BASE_URL+'/v1/parkCard/save',data).then(response => {
    if (response.data.code==2000){
      ElMessage.success('车位卡保存成功')
      loadUserParkCard()
      dialogVisible.value = false;
  }else {
      ElMessage.error(response.data.msg)}


})
};

const deleteParkCard = (id)=>{
  axios.post(BASE_URL+'/v1/parkCard/delete/'+id).then(response => {
    if (response.data.code==2000){
      ElMessage.success('车位卡删除成功')
      loadUserParkCard()
    }else {
      ElMessage.error(response.data.msg)
    }
  })
}

const value = ref('请选择停车场');
const options = [
];
//停车场数组
const parkinglots = ref([]);
const getParkinglots = ()=>{
  axios.get(BASE_URL+'/parklot/list')
      .then((response)=>{//回调函数,服务器响应后执行此处代码
        /*response是响应对象,我们可以从response.data中获取服务器给的响应数据*/
        //console.log("response");
        console.log(response.data);//{code:2000,msg:'OK',data:null}
        //根据状态码判断是否获取停车场列表成功,进行不同的处理
        if(response.data.code==2000){/*获取停车场列表成功*/
          parkinglots.value = response.data.data;
          console.log(parkinglots.value);
          //将停车场数组赋值到options数组中
          options.splice(0,options.length);
          for(let i=0;i<parkinglots.value.length;i++){
            options.push({value:parkinglots.value[i].id,label:parkinglots.value[i].name});
            console.log(options);
          }
        }else{/*获取停车场列表失败*/
          ElMessage.error(response.data.msg);
        }
      })
}
</script>

<template>
  <!--用户车位卡页-->
  <div style="height:5vh;padding:10px 20px;background-color:#fff;">
    <span style="line-height:60px;font-size:20px;">车位卡详情</span>
  </div>

  <!--用户车位卡搜索卡片-->
  <el-card style="margin: 20px;">
    <el-form :inline="true">
      <el-form-item label="停车场编号:" style="width: 300px;">
        <el-input placeholder="请输入停车场ID" v-model="searchParkCardForm.parkingId" @keydown.enter="loadUserParkCard"></el-input>
      </el-form-item>
      <el-form-item label="车位卡类型:" style="width: 300px;">
        <el-select placeholder="请选择车位卡类型" v-model="searchParkCardForm.type">
          <el-option label="月卡" value="月卡" />
          <el-option label="年卡" value="年卡" />
          <el-option label="临时卡" value="临时卡" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态:" style="width: 300px;">
        <el-select placeholder="请选择状态" v-model="searchParkCardForm.status">
          <el-option label="在售" value="在售" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearchForm">重置</el-button>
        <el-button type="primary" @click="loadUserParkCard">查询</el-button>
        <el-button  @click="newParkCard" type="success">新建车位卡</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!--用户车位卡数据表格卡片-->
  <el-card style="margin: 20px;">
    <el-table style="width: 100%" :data="parkCardArr">
      <el-table-column label="序号" type="index" width="80" align="center"/>
      <el-table-column label="车位卡编号" prop="parkCardId" align="center"/>
      <el-table-column label="停车场编号" prop="parkingId" align="center"/>
      <el-table-column label="名称" prop="name" align="center"/>
      <el-table-column label="类型" prop="type" align="center"/>
      <el-table-column label="价格" prop="price" align="center"/>
      <el-table-column label="状态" prop="status" align="center"/>
<!--      <el-table-column label="可用数量" prop="avableNum" align="center"/>-->
<!--      <el-table-column label="发行数量" prop="maxCount" align="center"/>-->
      <el-table-column label="有效期" prop="validDate" align="center"/>
      <el-table-column label="说明" prop="comment" align="center"/>
      <el-table-column label="操作" width="200" align="center">
        <template #default="scope">
<!--          <el-button type="primary"  @click="checkParkCard(scope.row.id)">查看</el-button>-->
          <el-button type="warning" @click="checkParkCard(scope.row)">编辑</el-button>
          <el-button type="danger" @click="deleteParkCard(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!-- 新建车位卡的弹窗 -->
  <el-dialog v-model="dialogVisible" v-model:title="dialogTitle"  @close="handleClose">
    <el-form label-position="right" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="车位卡名称">
            <el-input v-model="currentRow.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车位卡编号">
            <el-input v-model="currentRow.parkCardId"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车位卡类型">
            <el-select v-model="currentRow.type">
              <el-option label="包天卡" value="包天卡" />
              <el-option label="时长卡" value="时长卡" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="车位卡状态">
            <el-select v-model="currentRow.status">
              <el-option label="在售" value="在售" />
              <el-option label="下架" value="下架" />
            </el-select>
          </el-form-item>
        </el-col>
<!--        <el-col :span="8">-->
<!--          <el-form-item label="所属停车场">-->
<!--            <el-input v-model="currentRow.parkingId"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->

        <el-col :span="8">
          <el-form-item label="停车场">
          <el-select v-model="value" placeholder="选择停车场">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="价格">
            <el-input v-model="currentRow.price"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="有效期">
            <el-date-picker type="datetime" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
                            placeholder="选择日期" v-model="currentRow.validDate"/>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSave">保存</el-button>
      <el-button @click="handleClose">取消</el-button>
    </div>
  </el-dialog>
</template>

<style scoped>

</style>